<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>About Us</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/pe-icons.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/pagination.css" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link href="css/mycss.css" rel="stylesheet">
    <script src="js/jquery.js"></script>

    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/jquery.js"></script>

    <![endif]-->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/images/ico/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57x57.png">

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            'use strict';
            jQuery('body').backstretch([
                "images/bg/bg1.jpg",
                "images/bg/bg2.jpg",
                "images/bg/bg3.jpg"
            ], {duration: 5000, fade: 500});


        });
    </script>
</head><!--/head-->
<body>
<div id="preloader"></div>
<div th:replace="index :: header"></div>

<section id="single-page-slider" class="no-margin">
    <div class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="center gap fade-down section-heading">
                                <h2 class="main-title">攀枝花热点资讯</h2>
                                <hr>
                                <p>Hot information of Panzhihua</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/.item-->
        </div><!--/.carousel-inner-->
    </div><!--/.carousel-->
</section><!--/#main-slider-->

<div id="content-wrapper">
    <section id="blog" class="white">
        <div class="container">
            <div class="gap"></div>
            <div class="row" id="userPageBody">
<!--                <div class="col-md-4">-->
<!--                    <div class="post">-->
<!--                        <div class="post-img-content">-->
<!--                            <img src="images/portfolio/folio02.jpg" class="img-responsive"/>-->
<!--                            <div class="overlay">-->
<!--                                <a class="preview btn btn-outlined btn-primary" href="images/portfolio/folio02.jpg"-->
<!--                                   rel="prettyPhoto"><i class="fa fa-eye"></i></a>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="content">-->
<!--                            <h2 class="post-title">攀枝花京都大酒店</h2>-->
<!--                            <div class="author">-->
<!--                                <i class="fa fa-user"></i> By <b>涛宝宝</b> | <i class="fa fa-clock-o"></i>-->
<!--                                <time datetime="2019-01-20">April 11th, 2019</time>-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                京都大酒店是攀枝花第一批高端商务酒店，汇集了攀枝花的各方面的精英人士，为了攀枝花的共同繁荣贡献出了自己最大一份力量-->
<!--                            </div>-->
<!--                            <div class="read-more-wrapper">-->
<!--                                <a href="#" class="btn btn-outlined btn-primary">查看详情</a>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <div class="gap"></div>
            <div id="Pagination" class="pagination" style="float: right"><!-- 这里显示分页 --></div>
        </div>
    </section>

</div>
<div id="footer-wrapper" th:fragment="Pagefoot">
    <section id="bottom" class="divider-section">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 about-us-widget">
                    <h4>攀枝花-国际康养之都</h4>
                    <p>攀枝花市是全国唯一以花命名的城市，享有“花是一座城，城是一朵花”的美誉；
                        攀枝花是万里长江上游第一城，是四川通往南亚、东南亚的最近点；</p>
                </div><!--/.col-md-3-->

                <div class="col-md-3 col-sm-6">
                    <h4>网站制作</h4>
                    <div>
                        <ul class="arrow">
                            <li><a href="http://www.pzhu.edu.cn/">攀枝花学院</a></li>
                            <li><a href="http://www.pzhu.edu.cn/">数学与计算机学院</a></li>
                            <li><a href="#">2018级软件工程三班</a></li>
                            <li><a href="http://www.pzhuweb.cn/">WEB开发专业团队</a></li>
                        </ul>
                    </div>
                </div><!--/.col-md-3-->

                <div class="col-md-3 col-sm-6">
                    <h4>合作伙伴</h4>
                    <div>
                        <div class="media">
                            <div class="media-body">
                                <span class="media-heading"><a href="#">数学与计算机学院</a></span>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-body">
                                <span class="media-heading"><a href="#">2018级软件工程三班</a></span>
                            </div>
                        </div>
                    </div>
                </div><!--/.col-md-3-->

                <div class="col-md-3 col-sm-6">
                    <h4>联系我们</h4>
                    <address>
                        <strong>攀枝花学院</strong><br>
                        四川省攀枝花市机场路十号攀枝花学院<br>
                        邮编 617000<br>
                        <abbr title="Phone"><i class="fa fa-phone"></i></abbr> 0812-3370868
                    </address>
                </div> <!--/.col-md-3-->
            </div>
        </div>
    </section><!--/#bottom-->


    <footer id="footer" class="">
        <input type="hidden" id="bindUserInfo" th:value="${userInfo}">
        <div class="container">
            <div class="row">
                <div class="col-sm-8">
                    ICP备案号：蜀ICP备05017906号<a target="_blank" href="http://sc.chinaz.com/moban/"> 攀枝花学院</a>
                </div>
                <div class="col-sm-4">
                    <ul class="pull-right">
                        <li><a id="gototop" class="gototop" href="#"><i class="fa fa-chevron-up"></i></a></li>
                        <!--#gototop-->
                    </ul>
                </div>
            </div>
        </div>
    </footer><!--/#footer-->
</div>

<script src="js/init.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.pagination.js"></script>
<script src="layui/layui.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/widgets.js"></script>
<script src="js/common.js"></script>


<script>
    //大摇大摆的写我的jquery了;
    $(function () {
        window.pageNo = 1;
        generateUserPage();
    });

    function generateUserPage() {
        //发送请求，获得数据
        $.ajax({
            "url":"get/all/index/information",
            "type":"post",
            "data":{
                "pageNo":window.pageNo
            },
            "contentType":"application/x-www-form-urlencoded",
            // 预期服务器返回的数据
            "dataType":"json",
            "error":function(response){
                var message = response.responseJSON.message;
                layer.msg(message);
            },
            "success":function(response){

                //获取分页数据
                var pageInfo = response.data;

                //生成表格数据,因为是异步请求,所以生成表格的代码必须写在success的回调函数中;
                generateUserTable(pageInfo);

                //初始化页码导航条
                generateNavigator(pageInfo);
            }
        });
    }


    //生成表格数据
    function generateUserTable(pageInfo) {
        //清除旧的数据
        $("#userPageBody").empty();

        //获取list属性对应的数据
        var list = pageInfo.list;

        //检测list是否包含有效数据
        if(list == null || list.length == 0) {
            $("#userPageBody").append("<h1 align='center'>抱歉！为查询到任何匹配的数据！</h1>");
            return ;
        }

        //遍历list,从data中获取数据
        for(var i = 0; i < list.length; i++) {
            var informationItem = list[i];
            var itemId = informationItem.itemId;
            var itemName = informationItem.itemName;
            var informationItemBriefIntroduction = informationItem.informationItemBriefIntroduction;
            if (informationItemBriefIntroduction == null){
                informationItemBriefIntroduction = "";
            }
            var itemData = informationItem.itemData;
            if (itemData == null){
                itemData = "";
            }
            var backgroudImageSrc = informationItem.backgroudImageSrc;
            if (backgroudImageSrc == null){
                backgroudImageSrc = "http://39.107.45.130:8001/group1/M00/00/00/rBHE-F5sPJSAIpJTAAb804eX_u4753.jpg";
            }

            //使用元素动态进行绑定；
            var trHTML = "<div class='col-md-4'><div class='post'><div class='post-img-content'><img src='"+backgroudImageSrc+"' class='img-responsive'/><div class='overlay'><a class='preview btn btn-outlined btn-primary' href='"+backgroudImageSrc+"'  rel='prettyPhoto'><i class='fa fa-eye'></i></a></div>" +
                "</div><div class='content'><h2 class='post-title'>"+itemName+"</h2><div class='author'><i class='fa fa-user'></i> By <b>攀枝花官方</b> | <i class='fa fa-clock-o'></i><time datetime='2019-01-20'>"+itemData+"</time></div>" +
                "<div>"+informationItemBriefIntroduction+"</div><div class='read-more-wrapper'><a target='_blank' href='show_indexInformation_details?itemId=" + itemId + "' class='btn btn-outlined btn-primary' >查看详情</a></div></div></div></div>"
            $("#userPageBody").append(trHTML);
        }
    }

    function generateNavigator(pageInfo) {

        $("a[rel^='prettyPhoto']").prettyPhoto();

        // 获取分页总记录数
        var totalRecordNo = pageInfo.total;

        // 创建分页
        $("#Pagination").pagination(totalRecordNo, {
            num_edge_entries: 3, 				//边缘页数
            num_display_entries: 4, 			//主体页数
            callback: pageSelectCallback,		//点击具体页码时调用这个函数
            items_per_page:pageInfo.pageSize, 	//每页显示1项
            current_page: (pageInfo.pageNum-1),	//当前页索引，需要将pageInfo.pageNum-1才是合适的值
            prev_text: "上一页",					//上一页按钮的文本
            next_text: "下一页",					//下一页按钮的文本
        });
    }

    function pageSelectCallback(page_index, jq){

        //page_index+1等于要前往的页面的页码
        window.pageNo = page_index + 1;

        //调用分页函数
        generateUserPage();

        return false;
    }
</script>
</body>
</html>
